<template>
  <div class="min-h-screen bg-gray-50">
    <div class="mx-auto max-w-7xl px-4">
      <!-- 顶部功能区 -->
      <div class="flex items-center justify-between py-4 border-b">
        <div class="flex items-center gap-4">
          <el-button type="primary" class="!rounded-button whitespace-nowrap">
            <i class="el-icon-upload mr-1"></i>上传音频
          </el-button>
          <el-button class="!rounded-button whitespace-nowrap">
            <i class="el-icon-link mr-1"></i>绑定路径
          </el-button>
          <el-button class="!rounded-button whitespace-nowrap">
            <i class="el-icon-refresh"></i>
          </el-button>
        </div>
        <div class="relative w-80">
          <el-input
            v-model="searchText"
            placeholder="搜索音频文件"
            class="!rounded-button"
            prefix-icon="el-icon-search"
            clearable
          />
        </div>
      </div>

      <!-- 中部筛选区 -->
      <div class="py-4 space-y-4">
        <div class="flex flex-wrap gap-2">
          <span class="text-gray-600 mr-4 w-20">产品分类：</span>
          <el-checkbox-group v-model="productTypes" size="mini">
            <el-checkbox
              v-for="item in productTypeOptions"
              :key="item"
              :label="item"
              border
              class="!rounded-button"
            >
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </div>

        <div class="flex flex-wrap gap-2">
          <span class="text-gray-600 mr-4 w-20">内容分类：</span>
          <el-checkbox-group v-model="contentTypes" size="mini">
            <el-checkbox
              v-for="item in contentTypeOptions"
              :key="item"
              :label="item"
              border
              class="!rounded-button"
            >
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </div>

        <div class="flex flex-wrap gap-2">
          <span class="text-gray-600 mr-4 w-20">音频类型：</span>
          <el-checkbox-group v-model="audioTypes" size="mini">
            <el-checkbox
              v-for="item in audioTypeOptions"
              :key="item"
              :label="item"
              border
              class="!rounded-button"
            >
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </div>

        <div class="flex flex-wrap gap-2">
          <span class="text-gray-600 mr-4 w-20">性别分类：</span>
          <el-checkbox-group v-model="genderTypes" size="mini">
            <el-checkbox
              v-for="item in genderTypeOptions"
              :key="item"
              :label="item"
              border
              class="!rounded-button"
            >
              {{ item }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <!-- 音频列表区 -->
      <div class="py-4">
        <div
          v-for="(item, index) in audioList"
          :key="index"
          class="flex items-center justify-between p-4 mb-4 bg-white rounded-lg hover:shadow-md transition-shadow"
        >
          <div class="flex-1">
            <div class="flex items-center gap-4">
              <!-- <el-button
                class="!rounded-button"
                :icon="item.isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"
                @click="togglePlay(index)"
              /> -->
              <div class="flex-1">
                <h3 class="text-lg font-medium truncate">{{ item.name }}</h3>
                <p class="text-gray-600 text-sm line-clamp-2 mt-1">{{ item.content }}</p>
                <div class="flex gap-2 mt-2">
                  <el-tag
                    v-for="tag in item.tags"
                    :key="tag"
                    size="small"
                    class="!rounded-button"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
            </div>
          <!--  <div class="mt-4">
              <el-slider v-model="item.progress" :show-tooltip="false" />
            </div> -->
			<audio
			  ref="voicePlayer"
			  class="w-full"
			  style="margin-top: 10px;"
			  controls
			  src="https://ai-public.mastergo.com/ai/img_res/d4a7ce2c2a78689d000856ef389f9929.jpg"
			></audio>
          </div>
          <div class="flex items-center gap-3 ml-4">
			<el-tooltip content="音频克隆" placement="top">
			    <el-button class="!rounded-button" icon="el-icon-document-copy" @click="cloneAudio(item)" />
			</el-tooltip>
            <el-tooltip content="AI视频合成" placement="top">
				<el-button class="!rounded-button" icon="el-icon-magic-stick" @click="createAI(item)" />
			</el-tooltip>
			<el-tooltip content="标签编辑" placement="top">
				<el-button class="!rounded-button" icon="el-icon-edit" @click="editTags(item)" />
			</el-tooltip>
			<el-tooltip content="删除" placement="top">
				<el-button class="!rounded-button" icon="el-icon-delete" @click="deleteAudio(item)" />
			</el-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      productTypes: [],
      productTypeOptions: ['产品演示', '营销视频', '教学课程', '企业宣传'],
      contentTypes: [],
      contentTypeOptions: ['讲解配音', '产品推荐', '对话场景'],
      audioTypes: [],
      audioTypeOptions: ['人声配音', '背景音乐'],
      genderTypes: [],
      genderTypeOptions: ['男声', '女声', '童声'],
      audioList: [
        {
          name: '2024新品发布会产品讲解配音',
          content: '本次发布会重点介绍了我们最新的智能家居产品系列，包括智能音箱、智能灯具和智能安防系统等多个创新产品。',
          tags: ['产品演示', '男声', '正式'],
          progress: 30,
          isPlaying: false,
        },
        {
          name: '智慧城市解决方案介绍',
          content: '通过人工智能和物联网技术，为城市管理提供全方位的智能解决方案，包括交通管理、环境监测、公共安全等领域。',
          tags: ['企业宣传', '女声', '专业'],
          progress: 45,
          isPlaying: false,
        },
        {
          name: '在线教育平台课程配音',
          content: '针对高中数学难点知识进行深入浅出的讲解，帮助学生更好地理解和掌握数学概念。',
          tags: ['教学课程', '男声', '温和'],
          progress: 60,
          isPlaying: false,
        },
      ],
    };
  },
  methods: {
    togglePlay(index) {
      this.audioList[index].isPlaying = !this.audioList[index].isPlaying;
    },
    cloneAudio(item) {
      console.log('Clone audio:', item.name);
    },
    createAI(item) {
      console.log('Create AI version:', item.name);
    },
    editTags(item) {
      console.log('Edit tags for:', item.name);
    },
    deleteAudio(item) {
      console.log('Delete audio:', item.name);
    },
  },
};
</script>

<style scoped>
.el-slider {
  --el-slider-button-size: 14px;
  --el-slider-height: 4px;
}

.el-checkbox.el-checkbox--bordered {
  margin-right: 8px;
  margin-bottom: 8px;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e7eb inset !important;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #d1d5db inset !important;
}
</style>